<!-- @Author: Yu_Bo -->
<template>
	<view class="navbar">
		<!-- 买书 -->
		<u-navbar v-if="navtype == 'home'" :background="navBackground" :isBack='false' :border-bottom="false">
			<view class="slot-wrap">
				<view class="home_nav" @click="schoolBtn">
					<image class="icon_l" src="@/static/images/img/home_icon.png" mode=""></image>
					<view class="title line_one" v-if="userinfo && schoolinfo">{{schoolinfo}}</view>
					<view class="title line_one" v-else>请选择学院</view>
					<image class="icon_r" src="@/static/images/img/home_icon_bot.png" mode=""></image>
				</view>
			</view>
		</u-navbar>
		<!-- 卖书 -->
		<u-navbar v-if="navtype == 'sell'" title="卖书" title-color="#222222" :title-bold="true" :background="navBackground" :isBack='false' :border-bottom="false">
		</u-navbar>
		<!-- 书包 -->
		<u-navbar v-if="navtype == 'book'" title="书包" title-color="#222222" :title-bold="true" :background="navBackground" :isBack='false' :border-bottom="false">
		</u-navbar>
		<!-- 我的 -->
		<u-navbar v-if="navtype == 'wo'" title="我的" title-color="#ffffff" :title-bold="true" :background="navBackground" :isBack='false' :border-bottom="false">
		</u-navbar>
		<!-- 学籍信息 -->
		<u-navbar v-if="navtype == 'student'" title="学籍信息" title-color="#ffffff" :title-bold="true" :background="navBackground" :isBack='true' back-icon-color="#ffffff" :border-bottom="false">
		</u-navbar>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		components: {},
		props: {
			navtype: {
				type: String,
				default: ""
			},
		},
		data() {
			return {

			}
		},
		computed: {
			...mapState({
				userinfo: (state) => state.userinfo
			}),
			navBackground() {
				if (this.navtype == "home") {
					return {
						background: "#f6f6f6 url(" + require('@/static/images/img/home_nav_bg.png') + ") no-repeat",
						backgroundSize: "cover"
					}
				}
				if (this.navtype == "sell") {
					return {
						background: "#ffffff url(" + require('@/static/images/img/home_nav_bg.png') + ") no-repeat",
						backgroundSize: "cover"
					}
				}
				if (this.navtype == "book") {
					return {
						background: "#f6f6f6 url(" + require('@/static/images/img/home_nav_bg.png') + ") no-repeat",
						backgroundSize: "cover"
					}
				}
				if (this.navtype == "wo") {
					return {
						background: "#ffffff url(" + require('@/static/images/img/wo_nav_bg.png') + ") no-repeat",
						backgroundSize: "cover"
					}
				}
				if (this.navtype == "student") {
					return {
						background: "#ffffff url(" + require('@/static/images/img/student_nav_bg.png') + ") no-repeat",
						backgroundSize: "cover"
					}
				}
			},
			schoolinfo() {
				if(this.userinfo.college && this.userinfo.grade && this.userinfo.speciality) {
					return this.userinfo.college + '/' + this.userinfo.grade + '/' + this.userinfo.speciality
				} else {
					return ""
				}
			},
		},
		mounted() {},
		methods: {
			// 选择学校
			schoolBtn() {
				if(this.userinfo.college_id) {
					this.$navToLogin("/pagesWo/student/index")
				} else {
					this.$navToLogin("/pagesHome/student/index")
				}
			},
		},
	}
</script>

<style lang='scss' scoped>
	.slot-wrap {
		position: relative;
		width: 100%;
	}
	.home_nav {
		padding-left: 30rpx;
		display: flex;
		align-items: center;
		
		.icon_l {
			display: block;
			width: 32rpx;
			height: 28rpx;
		}
		
		.title {
			max-width: 450rpx;
			padding: 0 10rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
		}
		
		.icon_r {
			display: block;
			width: 32rpx;
			height: 32rpx;
		}
	}
	.nav_title {
		position: absolute;
		top: 0;
		width: 100%;
		text-align: center;
	}
</style>